<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 组件之全局组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <list-item title="这是一个全局组件" content="这也是自定义的另一个属性">道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不知谁之子，象帝之先。
        </list-item>
        <list-item :content="message"></list-item>
        <list-item>{{message}}</list-item>
        <hello></hello>
        <hello>dfdfd</hello>
        <p title="这是一个p元素的title属性的值">这是p元素所标记的内容</p>

    </div>

    <script>
        Vue.component('list-item', {
            data: function () {
                return { score: 100 }
            },
            props: ['title', 'content'],
            template: '<div>'
                + '<h2>{{title}}</h2>'
                + '<p><slot></slot></p>'
                + '<p>{{content}}</p>'
                + '<p>{{score}}</p>'
                + '</div>'
        })
        var hello = {
            template: '<button>这是一个局部组件</button>'
        }
        var app = new Vue({
            el: "#app",
            data: {
                message: 'hi'
            },
            components: {
                'hello': hello
            }

        })
    </script>

</body>

</html>
